var dayjs = require('dayjs')

import '../css/index.css'
import { createSingleYearList, selectedYear } from './createYearList.js'
import { createSingleMonthList, selectedMonth } from './createMonthList.js';
import { createSingleMonthPanelTop } from './createMonthPanelTop';
import { createSingleYearPanel } from './createYearPanel';
import { other } from './other';


let myPicked;
const nowYear = dayjs().get('year')
const nowMonth = dayjs().get('month') + 1;
const nowDate = dayjs().get('date');
// 获取需要填充数据的元素
const yearSpan = selectedYear.querySelector('span')
const monthSpan = selectedMonth.querySelector('span')
// 填充数据
yearSpan.innerHTML = `${nowYear}年`
monthSpan.innerHTML = `${nowMonth}月`


// 创建年列表
const yearList = createSingleYearList();
// 创建月列表
const monthList = createSingleMonthList();
// 创建月面板头部
const monthPanel = createSingleMonthPanelTop();
// 创建年面板
const yearPanel = createSingleYearPanel();


// 获取月按钮
const monthButton = document.querySelector('.month')
// 获取年按钮
const yearButton = document.querySelector('.year')

// 获取年列表每一项
const yearLis = selectedYear.querySelectorAll('li')
// 获取月列表每一项
const monthLis = selectedMonth.querySelectorAll('li')

const currentYear = parseInt(document.querySelector('.selectedYear span').innerHTML);
const currentMonth = parseInt(document.querySelector('.selectedMonth span').innerHTML);


// 获取当月的天数(Number)
let dateNum = dayjs(`${currentYear}-${currentMonth}`).daysInMonth();
// 获取每月第一天是周几(Number)
let weekStart = dayjs(`${currentYear}-${currentMonth}`).get('day');
// 获取上一个月的天数
let lastDateNum = dayjs(`${currentYear}-${currentMonth}`).subtract(1, 'month').daysInMonth();


// 生成初始化面板
const main = document.querySelectorAll('main')[0];
const table = document.createElement('table');
let num = 0;
let one = 1;
let initFirst = lastDateNum-weekStart+1;
table.className = 'list-body';
let tabletr = new Array(6);
for (var i = 0; i < 6; i++) {
    tabletr[i] = new Array(7);
}
for (var i = 0; i < 6; i++) {
    tabletr[i] = document.createElement('tr');
    for (var j = 0; j < 7; j++) {
        tabletr[i][j] = document.createElement('td');
        if ((i == 0 && j >= weekStart) || i > 0) {
            if (num >= dateNum) {
                tabletr[i][j].innerHTML = one++;
                tabletr[i][j].style.color = '#ccc';
            }
            else {
                tabletr[i][j].innerHTML = ++num;
                if (num == nowDate) {
                    myPicked = nowDate;
                }
            }
        }
        else if (i == 0 && j < weekStart){
            tabletr[i][j].innerHTML = initFirst++;
            tabletr[i][j].style.color = '#ccc';
        }
        tabletr[i].appendChild(tabletr[i][j])
    }
    table.appendChild(tabletr[i]);
}
main.appendChild(table);





// 单击年份框实现样式转换
selectedYear.addEventListener('click', function (e) {
    e.stopPropagation();
    monthList.style.display = 'none';
    selectedYear.classList.add('activebox')
    selectedMonth.classList.remove('activebox')
    selectedMonth.style.color = 'black';
    if (yearList.style.display == 'none') {
        yearList.style.display = 'block'
        selectedYear.style.color = '#ccc'
    }
    else if (yearList.style.display == 'block') {
        yearList.style.display = 'none'
        selectedYear.style.color = 'black'
    }
}, false)

// 单击月份框实现样式转换
selectedMonth.addEventListener('click', function (e) {
    e.stopPropagation();
    yearList.style.display = 'none';
    selectedYear.classList.remove('activebox')
    selectedMonth.classList.add('activebox')
    selectedYear.style.color = 'black';
    if (monthList.style.display == 'none') {
        monthList.style.display = 'block'
        selectedMonth.style.color = '#ccc'
    }
    else if (monthList.style.display == 'block') {
        monthList.style.display = 'none'
        selectedMonth.style.color = 'black'
    }
}, false)

// 给月按钮添加单击事件,实现显示隐藏
monthButton.addEventListener('click', function (e) {
    e.stopPropagation();
    monthButton.classList.add('activeButton');
    yearButton.classList.remove('activeButton');
    selectedYear.classList.remove('activebox')
    selectedMonth.classList.remove('activebox')
    selectedMonth.style.display = 'block';
    selectedYear.style.color = 'black';
    monthPanel.style.display = 'block';
    yearPanel.style.display = 'none';
    yearList.style.display = 'none';
    monthList.style.display = 'none';
}, false);

// 给年按钮添加单击事件，实现显示隐藏
yearButton.addEventListener('click', function (e) {
    e.stopPropagation();
    yearButton.classList.add('activeButton');
    monthButton.classList.remove('activeButton', 'monthInit');
    selectedYear.classList.remove('activebox')
    selectedMonth.classList.remove('activebox')
    selectedMonth.style.display = 'none';
    selectedYear.style.color = 'black';
    monthPanel.style.display = 'none';
    yearPanel.style.display = 'block';
    yearList.style.display = 'none';
    monthList.style.display = 'none';
}, false);

document.addEventListener('click', function () {
    yearList.style.display = 'none';
    monthList.style.display = 'none';
    selectedMonth.style.color = 'black'
    selectedYear.style.color = 'black';
    selectedYear.classList.remove('activebox');
    selectedMonth.classList.remove('activebox');
}, false)


// 单击年列表的每一项
const yearUl = document.querySelector('.selectedYear>ul');
yearUl.addEventListener('click', (e) => {
    if (e.target == this) return
    yearSpan.innerHTML = e.target.innerHTML;
    // 如果当前所选年不为今年，那么所选的item边框为灰色
    if (yearSpan.innerHTML != `${nowYear}年`) {
        monthtds.forEach(item => {
            if (item.classList.contains('selectTd')) {
                item.style.borderColor = '#ccc'
            }
        })
    }
    // 反之,如果是今年则为蓝色
    else {
        monthtds.forEach(item => {
            if (item.classList.contains('selectTd')) {
                item.style.borderColor = '#1890FF'
            }
        })
    }
    // 生成新面板
    create(monthSpan.innerHTML,yearSpan.innerHTML);
}, false)

// 单击月列表每一项
const monthUl = document.querySelector('.selectedMonth>ul');
monthUl.addEventListener('click', (e) => {
    if (e.target == this) return
    monthSpan.innerHTML = e.target.innerHTML;
    monthtds.forEach(item => {
        item.classList.remove('activeTd');
        if (item.innerHTML == monthSpan.innerHTML) {
            item.classList.add('activeTd')
        }
    })
    create(monthSpan.innerHTML,yearSpan.innerHTML);
})

// 获取月面板每一项
const datetds = document.querySelectorAll('.list-body td');
// 获取年面板每一项
const monthtds = document.querySelectorAll('.year-body td');

// 单击年面板每一项实现逻辑变化
monthtds.forEach(item => {
    item.addEventListener('click', function () {
        monthSpan.innerHTML = this.innerHTML;
        create(monthSpan.innerHTML,yearSpan.innerHTML);
    }, false)
})

// 单击月面板每一项实现逻辑变化
datetds.forEach(item => {
    item.addEventListener('click', function () {
        myPicked = Number(this.innerHTML);
        if(item.style.color){
            if(parseInt(item.innerHTML)<10){
                if(parseInt(monthSpan.innerHTML) == 12){
                    if(parseInt(yearSpan.innerHTML)==2025){
                        return;
                    }
                    monthSpan.innerHTML = `${1}月`;
                    yearSpan.innerHTML = (parseInt(yearSpan.innerHTML)+1)+"年"
                }
                else{
                    monthSpan.innerHTML = (parseInt(monthSpan.innerHTML)+1)+'月'
                }
                create(monthSpan.innerHTML,yearSpan.innerHTML);
            }
            else if(parseInt(item.innerHTML)>20){
                if(parseInt(monthSpan.innerHTML) == 1){
                    if(parseInt(yearSpan.innerHTML)==2015){
                        return;
                    }
                    monthSpan.innerHTML = `${12}月`;
                    yearSpan.innerHTML = (parseInt(yearSpan.innerHTML)-1)+"年"
                }
                else{
                    monthSpan.innerHTML = (parseInt(monthSpan.innerHTML)-1)+'月'
                }
                create(monthSpan.innerHTML,yearSpan.innerHTML);
            }
        }
    }, false)
})


// 单击面板和列表项单纯实现样式的变化.
other(datetds, 'panel')
other(monthtds, 'panel')
other(yearLis, 'list')
other(monthLis, 'list')


// 创建面板函数
function create(monthStr,yearStr) {
    let num = 0;
    let one = 1;
    const month = parseInt(monthStr);
    const year = parseInt(yearStr);

    let weekStart = dayjs(`${year}-${month}`).get('day');
    let dateNum = dayjs(`${year}-${month}`).daysInMonth();
    let lastDateNum = dayjs(`${year}-${month}`).subtract(1, 'month').daysInMonth();
    let initFirst = lastDateNum-weekStart+1;
    // 生成新面板
    const main = document.querySelectorAll('main')[0];
    const oldTable = document.querySelector('.list-body');
    main.removeChild(oldTable);
    const table = document.createElement('table');
    table.className = 'list-body';
    const tabletr = new Array(6);
    for (var i = 0; i < 6; i++) {
        tabletr[i] = new Array(7);
    }
    for (var i = 0; i < 6; i++) {
        tabletr[i] = document.createElement('tr');
        for (var j = 0; j < 7; j++) {
            tabletr[i][j] = document.createElement('td');
            if ((i == 0 && j >= weekStart) || i > 0) {
                if (num >= dateNum) {
                    tabletr[i][j].innerHTML = one++;
                    tabletr[i][j].style.color = '#ccc';
                }
                else {
                    tabletr[i][j].innerHTML = ++num;
                    if (num == myPicked) {
                        tabletr[i][j].classList.add('activeTd');
                    }
                }
            }
            else if (i == 0 && j < weekStart){
                tabletr[i][j].innerHTML = initFirst++;
                tabletr[i][j].style.color = '#ccc';
            }
            tabletr[i].appendChild(tabletr[i][j]);
        }
        table.appendChild(tabletr[i]);
    }
    main.appendChild(table);
    const datetds = document.querySelectorAll('.list-body td');
    // 单击月面板每一项实现逻辑变化
    datetds.forEach(item => {
        item.addEventListener('click', function () {
            myPicked = Number(this.innerHTML);
            if(item.style.color){
                if(parseInt(item.innerHTML)<10){
                    if(parseInt(monthSpan.innerHTML) == 12){
                        if(parseInt(yearSpan.innerHTML)==2025){
                            return;
                        }
                        monthSpan.innerHTML = `${1}月`;
                        yearSpan.innerHTML = (parseInt(yearSpan.innerHTML)+1)+"年"
                    }
                    else{
                        monthSpan.innerHTML = (parseInt(monthSpan.innerHTML)+1)+'月'
                    }
                    create(monthSpan.innerHTML,yearSpan.innerHTML);
                }
                else if(parseInt(item.innerHTML)>20){
                    if(parseInt(monthSpan.innerHTML) == 1){
                        if(parseInt(yearSpan.innerHTML)==2015){
                            return;
                        }
                        monthSpan.innerHTML = `${12}月`;
                        yearSpan.innerHTML = (parseInt(yearSpan.innerHTML)-1)+"年"
                    }
                    else{
                        monthSpan.innerHTML = (parseInt(monthSpan.innerHTML)-1)+'月'
                    }
                    create(monthSpan.innerHTML,yearSpan.innerHTML);
                }
            }
        }, false)
    })
    other(datetds, 'panel');
}




